const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: "development",
  target: "web",
  resolve: {
      alias: {
          '@': path.resolve('src')
      }
  },
  devtool: "eval-cheap-module-source-map",
  optimization: {
    minimize: false,
    minimizer: [new UglifyJsPlugin()]
  },
  entry: {
    index: path.resolve(__dirname, "src/applications/Index.js"),
    list: path.resolve(__dirname, 'src/applications/List.js'),
    detail: path.resolve(__dirname, 'src/applications/Detail.js'),
    cart: path.resolve(__dirname, 'src/applications/Cart.js'),
    order: path.resolve(__dirname, 'src/applications/Order.js')
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
          test: /\.tpl$/i,
          loader: 'ejs-loader',
          options: {
            esModule: false
          }
      },
      {
        test: /\.(le|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      // 处理图片
      {
        test: /\.(png|jpe?g|gif)$/i,
        // 使用 asset 处理
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: "images/[name][ext]",
        },
      },
      // 字体处理
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        // 使用asset处理资源文件
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: "fonts/[name][ext]",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      minify: {
      	removeComments: true,
      	collapseWhitespace: true
      },
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      title: '小米手机官网',
      chunksSortMode: 'manual',
      chunks: ['index'],
      excludeChunks: ['node_modules'],
      hash: true
    }),

    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'list.html',
      template: path.resolve(__dirname, 'src/list.html'),
      title: '小米手机官网',
      chunksSortMode: 'manual',
      chunks: ['list'],
      excludeChunks: ['node_modules'],
      hash: true
    }),

    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'detail.html',
      template: path.resolve(__dirname, 'src/detail.html'),
      title: '小米手机官网',
      chunksSortMode: 'manual',
      chunks: ['detail'],
      excludeChunks: ['node_modules'],
      hash: true
    }),

    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'cart.html',
      template: path.resolve(__dirname, 'src/cart.html'),
      title: '小米手机官网',
      chunksSortMode: 'manual',
      chunks: ['cart'],
      excludeChunks: ['node_modules'],
      hash: true
    }),

    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'order.html',
      template: path.resolve(__dirname, 'src/order.html'),
      title: '小米手机官网',
      chunksSortMode: 'manual',
      chunks: ['order'],
      excludeChunks: ['node_modules'],
      hash: true
    }),

    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
  ],
  devServer: {
      contentBase: path.join(__dirname, 'dist'),
      watchOptions: {
          ignored: /node_modules/
      },
      open: true,
      port: 7000,
      liveReload: true,
      stats: 'errors-only',
      compress: true
  }
};
